<template>
  <div class="news-add-page">
    <!-- 导航栏 -->
    <NavBar title="发布新闻" />
    
    <!-- 表单内容 -->
    <div class="page-content">
      <van-form @submit="handleSubmit">
        <!-- 新闻标题 -->
        <van-field
          v-model="form.title"
          name="title"
          label="新闻标题"
          placeholder="请输入新闻标题"
          :rules="[{ required: true, message: '请输入新闻标题' }]"
        />
        
        <!-- 作者 -->
        <van-field
          v-model="form.author"
          name="author"
          label="作者"
          placeholder="请输入作者姓名"
        />
        
        <!-- 封面图片 -->
        <van-field name="coverImage" label="封面图片">
          <template #input>
            <van-uploader
              v-model="coverImageList"
              :max-count="1"
              :after-read="afterCoverRead"
            />
          </template>
        </van-field>
        
        <!-- 新闻内容 -->
        <van-field
          v-model="form.content"
          name="content"
          label="新闻内容"
          type="textarea"
          placeholder="请输入新闻内容"
          rows="8"
          :rules="[{ required: true, message: '请输入新闻内容' }]"
        />
        
        <!-- 内容图片 -->
        <van-field name="images" label="内容图片">
          <template #input>
            <van-uploader
              v-model="form.images"
              multiple
              :max-count="9"
              :after-read="afterRead"
            />
          </template>
        </van-field>
        
        <!-- 标签 -->
        <van-field
          v-model="tagInput"
          name="tags"
          label="标签"
          placeholder="输入标签后按回车添加"
          @keyup.enter="addTag"
        />
        
        <!-- 标签列表 -->
        <div class="tags-list" v-if="form.tags.length">
          <van-tag 
            v-for="(tag, index) in form.tags" 
            :key="index"
            closeable
            type="primary"
            @close="removeTag(index)"
          >
            {{ tag }}
          </van-tag>
        </div>
        
        <!-- 提交按钮 -->
        <div class="submit-section">
          <van-button
            round
            block
            type="primary"
            native-type="submit"
            :loading="loading"
          >
            发布新闻
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { showToast } from 'vant'
import NavBar from '@/components/Common/NavBar.vue'
import { newsApi, uploadApi } from '@/api'

const router = useRouter()

// 表单数据
const form = ref({
  title: '',
  author: '',
  content: '',
  coverImage: '',
  images: [] as any[],
  tags: [] as string[]
})

const loading = ref(false)
const tagInput = ref('')
const coverImageList = ref([])

// 封面图片上传后处理
const afterCoverRead = async (file: any) => {
  try {
    const response = await uploadApi.uploadImage(file.file)
    file.url = response.data.url
    form.value.coverImage = response.data.url
  } catch (error) {
    showToast('封面图片上传失败')
    console.error('封面图片上传失败:', error)
  }
}

// 内容图片上传后处理
const afterRead = async (file: any) => {
  try {
    const response = await uploadApi.uploadImage(file.file)
    file.url = response.data.url
  } catch (error) {
    showToast('图片上传失败')
    console.error('图片上传失败:', error)
  }
}

// 添加标签
const addTag = () => {
  const tag = tagInput.value.trim()
  if (tag && !form.value.tags.includes(tag)) {
    form.value.tags.push(tag)
    tagInput.value = ''
  }
}

// 移除标签
const removeTag = (index: number) => {
  form.value.tags.splice(index, 1)
}

// 提交表单
const handleSubmit = async () => {
  loading.value = true
  
  try {
    const data = {
      ...form.value,
      images: form.value.images.map(img => img.url).filter(Boolean)
    }
    
    await newsApi.create(data)
    showToast('发布成功')
    router.back()
  } catch (error) {
    showToast('发布失败')
    console.error('发布失败:', error)
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.news-add-page {
  min-height: 100vh;
  background-color: #f1f1f1;
}

.page-content {
  padding: 16px;
}

.tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
  padding: 0 16px;
}

.submit-section {
  margin-top: 24px;
  padding: 0 16px;
}
</style>